<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/d3.min.js"></script>
	<script type="text/javascript" src="js/strucMap.min.js"></script>
	<link rel="stylesheet" href="css/strucMap.min.css" />
<style>
	html, body {
		margin: 0;
		padding: 0;
	}
</style>
</head>

<body>
	<div id="topomap" style="margin: 0 auto;"></div>
	<script type="text/javascript">

		var nodePX = 0;
		var nodePY = 0;

		var options = {
			selector: "#topomap",
			width: document.body.clientWidth,//实际展开图宽度
			height: document.body.clientHeight,//实际展开图高度
			lineLength: 100,
//	        textColor:"#000",
//	        textFontFamily:'',
			nodesClick: function (t) {
				//if(t.index==0) t.fixed=1;//判断如果是第一级，移动后就将它固定
				t.fixed = 1;
				console.log(t);
				var nodeX = JSON.parse(JSON.stringify(t.x));
				var nodeY = JSON.parse(JSON.stringify(t.y));
				//xy都没有变，说明没有拖动
				if ((nodeX == nodePX) && (nodeY == nodePY)) {
					console.info("跳页面啦~~~~~~");
				}
			},
			nodesDragstart: function (t) {
				nodePX = JSON.parse(JSON.stringify(t.x));
				nodePY = JSON.parse(JSON.stringify(t.y));
				//console.log("移动开始",JSON.parse(JSON.stringify(t.x)),JSON.parse(JSON.stringify(t.y)));
			}
		};

		var nodesJson = [
		{ "fixed": true, "id": 0, "index": 0, "prop": { "name": "AKI", "size": 32, "nTxt": "76%" }, "x": document.body.clientWidth/2, "y": document.body.clientHeight/2 },

		{ "id": 1, "index": 1, "prop": { "name": "基本信息", "size": 25 } },
		{ "id": 2, "index": 1, "prop": { "name": "检验", "size": 25 } },

		{ "id": 3, "index": 2, "prop": { "name": "性别", "size": 15, "nTxt": "男" } },
		{ "id": 4, "index": 2, "prop": { "name": "年龄", "size": 15, "nTxt": "66岁" } },
		{ "id": 5, "index": 2, "prop": { "name": "体重", "size": 15 } },
		{ "id": 6, "index": 2, "prop": { "name": "身高", "size": 15, "nTxt": "178" } },
		{ "id": 7, "index": 2, "prop": { "name": "BMI分组", "size": 15 } },

		{ "id": 8, "index": 2, "prop": { "name": "血清碳酸氢根", "size": 15 } },
		{ "id": 9, "index": 2, "prop": { "name": "氯", "size": 15, "nTxt": "95.2" } },
		{ "id": 10, "index": 2, "prop": { "name": "血清肌酐", "size": 15, "nTxt": "43.5" } },
		{ "id": 11, "index": 2, "prop": { "name": "血糖", "size": 15, "nTxt": "7.96" } },
		{ "id": 12, "index": 2, "prop": { "name": "镁", "size": 15, "nTxt": "1.0" } },
		{ "id": 13, "index": 2, "prop": { "name": "钾", "size": 15, "nTxt": "3.78" } },
		{ "id": 14, "index": 2, "prop": { "name": "钠", "size": 15, "nTxt": "126.5" } },
		{ "id": 15, "index": 2, "prop": { "name": "尿素氮", "size": 15, "nTxt": "2.93" } },
		{ "id": 16, "index": 2, "prop": { "name": "血红蛋白", "size": 15, "nTxt": "102" } },
		{ "id": 17, "index": 2, "prop": { "name": "血小板", "size": 15, "nTxt": "225" } },
		{ "id": 18, "index": 2, "prop": { "name": "白细胞", "size": 15, "nTxt": "20.34" } }

		];
		//source和target都是按照数组的顺序来的，下标
		var linksJson = [
			{ "source": 0, "target": 1, },
			{ "source": 0, "target": 2, },

			{ "source": 1, "target": 3, },
			{ "source": 1, "target": 4, },
			{ "source": 1, "target": 5, },
			{ "source": 1, "target": 6, },
			{ "source": 1, "target": 7, },

			{ "source": 2, "target": 8, },
			{ "source": 2, "target": 9, },
			{ "source": 2, "target": 10, },
			{ "source": 2, "target": 11, },
			{ "source": 2, "target": 12, },
			{ "source": 2, "target": 13, },
			{ "source": 2, "target": 14, },
			{ "source": 2, "target": 15, },
			{ "source": 2, "target": 16, },
			{ "source": 2, "target": 17, },
			{ "source": 2, "target": 18, }

		];

		console.log("初始化打印", linksJson);
		loadMap(options, nodesJson, linksJson);
	</script>
</body>

</html>